<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>模态框插件</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body>
<!-- 
	模态框插件：这是一款交互式网站非常常见的弹窗功能插件。
		需要 3 层嵌套式的div容器：modal(模态框声明层)、modal-dialog(窗口声明层)、modal-content(内容层)。content(内容层)内还包含 3 层同级容器modal-header、modal-body、modal-footer.

	1.基本实例(模态框默认隐藏,所以用.show,一般调试用)
		1)	.modal 							//对最外层容器添加
		2)	.modal-dialog					//对第二层容器添加
		3)	.modal-content					//对第三层容器添加
				.modal-header 
					.modal-title
				.modal-body
				.modal-footer				//对在.modal-content内的所有同级容器添加

	2.调用模态框(一般用一个按钮让模态框显示出来,纯css样式)
		1)	data-toggle="modal"				//对btn添加
		2)	data-target="#id名称" 			//对btn添加(有#号)
		3)	tabindex="-1" 					//对最外层容器添加。将tabIndex赋值(似乎是任意值)，取消(-1)或获取(0以上)焦点，此时按下esc可以关闭弹窗。

	3.弹窗大小
		1)	.modal-lg 						//对.modal-dialog(窗口声明层)添加，下同
			.modal-sm

	4.淡入淡出(由上往下运动效果)
		1)	.fade 							//对最外层容器添加
	
	5.在主体部分使用栅格系统中的流体(固体不能用)
		1)	.container-fluid 				//在.modal-body内部

	6.遮罩与功能
		1)	data-backdrop="true"(默认)		// 对.modal层添加。黑灰色遮罩，点击遮罩部分可以退出
		 	data-backdrop="false" 			// 对.modal层添加。无黑灰色遮罩，点击遮罩部分无效

	7.按esc退出弹窗(对btn添加)
		1)	data-keyboard="true"(默认) 			//当焦点在弹出框身上是，按esc键会关闭弹出窗。所以一般需要配合data-tabindex="-1"(或其他数字。但似乎只要弹窗获取到焦点时，浏览器默认按下esc就可以关闭弹窗，而不需要借助data-keyboard="true")
			data-keyboard="false"

	8.远程加载
		1)	href="远程文件.html"
			在jquery下用remote:远程文件.html

	9.show属性(modal是方法)
		通过JQ来设置以上效果(这个)，给button添加一个id名称id="btn"。jq的代码必须放在jquery.min.js之下
		
		$('#btn').on('click', function () {
			$('#myModal').modal('show');
		})

	10.在JQuery下使用
		1.事件
			1)	show.bs.modal 				当调用show方法是立刻触发
			2)	shown.bs.modal	 			当弹窗完全出现时立刻触发
			3)	hide.bs.modal 				关闭弹窗时立刻触发
			4)	hidden.bs.modal 			当弹窗完全关闭后触发
 --> 	
	
	<!-- <div class="modal show"> --> 	<!-- 调试用，用来自己调试样式的 -->
	<div class="modal fade" id="myModal" tabindex="-1" data-backdrop="true">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" data-dismiss="modal"><span>&times;</span></button>
					<h4 class="modal-title">会员登陆</h4>
				</div>
				<div class="modal-body">
					<p>暂时无法注册</p>
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-4">1</div>
							<div class="col-md-4">2</div>
							<div class="col-md-4">3</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button class="btn btn-default">注册</button>
					<button class="btn btn-primary">登陆</button>
				</div>
			</div>
		</div>
	</div>

	<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-keyboard="false">点击弹窗</button>

	<button class="btn btn-info" data-toggle="modal" data-target="#myModal" href="a.html">远程加载</button>

	<button class="btn btn-success" data-toggle="modal" data-target="#myModal" id="btn">显示</button>

	<p>远程加载用不了，不知道哪里出了问题</p>



	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
	<script>
		// 第一种
		/*$(function () {
			$('btn').on('click', function () {
				$('#myModal').modal('show'); 				//modal方法，show属性
			})
		})*/

		// 第二种
		/*$('#myModal').modal({
			show : false, 									//不会默认直接弹窗
			backdrop : false,
			keyboard : false,
			remote : 'a.html'
		})*/

		// 事件
		/*$('#myModal').on('show.bs.modal', function () {
			alert('当调用show方法是立刻触发')
		})*/

		/*$('#myModal').on('shown.bs.modal', function () {
			alert('当调用show方法是立刻触发')
		})*/

		/*$('#myModal').on('hide.bs.modal', function () {
			alert('关闭弹窗时立刻触发')
		})*/

		/*$('#myModal').on('hidden.bs.modal', function () {
			alert('当弹窗完全关闭后触发')
		})*/

		$('#myModal').on('loaded.bs.modal', function () {
			alert('当远程加载后触发')
		})

	</script>

</body>
</html>